﻿<template>
    <div class="OperType">
        <MyDialog :model-value="true" :type="DialogType.C2" title="出入库类型" @close="onClose">
            <DataTable ref="OperTypeDataTableRef" :data="list" divHeight="calc(100vh - 450px)" :has-filter="false" :has-search="true" :hasAdd="true && !isSelect" :checkbox-config="checkboxConfig" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
                <vxe-column title="名称" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.name || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="启用/禁用" min-width="120" show-overflow>
                    <template #default="{ row }">
                        <span :class="Enums.Delete_Status.Get(row.isDelete).color">{{ Enums.Delete_Status.Get(row.isDelete).text }}</span>
                    </template>
                </vxe-column>

                <vxe-column title="修改人姓名" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ row.updateUserName || "-" }}
                    </template>
                </vxe-column>

                <vxe-column title="修改时间" min-width="120" show-overflow>
                    <template #default="{ row }">
                        {{ Gx.YMD(row.updateDate) }}
                    </template>
                </vxe-column>

                <vxe-column title="操作" width="100" v-if="!isSelect">
                    <template #default="{ row }">
                        <el-button :disabled="row.isDelete || row.isInit" type="primary" @click="onShowDetail(row)">编辑</el-button>
                    </template>
                </vxe-column>

                <!-- 在添加按钮后面的搜索条件 -->
                <template #otherFilter>
                    <el-input v-model="filterModel._Name" clearable placeholder="名称"></el-input>
                </template>

                <!-- 在搜索按钮后面的按钮 -->
                <template #otherBtn></template>

                <!-- 顶部右侧按钮 -->
                <template #rightBtn v-if="!isSelect">
                    <el-button-group>
                        <el-button v-if="true" type="primary" @click="onUnDel">启用</el-button>
                        <el-button v-if="true" type="danger" @click="onDel">禁用</el-button>
                    </el-button-group>
                </template>

                <!-- 高级搜索内容 -->
                <template #Advfilter>
                    <!-- <el-form v-model="filterModel" label-position="top" @submit.prevent></el-form> -->
                </template>
            </DataTable>

            <!-- 出入库业务类型详情 -->
            <OperTypeDetail ref="OperTypeDetailRef" v-if="isShowDetail" @close="onCloseDetail"></OperTypeDetail>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import { DialogType } from "@/_gx/TsEnums";
import OperTypeDetail from "./OperTypeDetail.vue";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[OperType].[OperTypeID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const OperTypeDataTableRef = ref(null);

//接收父组件的传值
const inOutType = inject("inOutType") as Ref<number | null>;

const checkboxConfig = reactive({
    checkMethod: ({ row }) => {
        return !row.isInit;
    },
});

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {} as any;

    MergeObjs(_data, filterModel.value, props.defaultFilter);

    _data._InOutType = inOutType.value;
    App.CallApi(Api.OperType.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

/********************************************** 列表按钮功能 **********************************************/

//禁用
const onDel = () => {
    let _ids: [] = OperTypeDataTableRef.value.GetSelectProp();
    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要禁用选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.OperType.BatchDel, {
                data: _ids,
                success: (res: any) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

//启用
const onUnDel = () => {
    let _ids: [] = OperTypeDataTableRef.value.GetSelectProp();
    if (Gx.IsEmpty(_ids) || _ids.length == 0) {
        App.Tips({ msg: "请在下方的表格中选择相应的数据！" });
        return;
    }

    App.Confirm({
        msg: "确定要启用选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.OperType.BatchUnDel, {
                data: _ids,
                success: (res: any) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const OperTypeDetailRef = ref(null);
//向子组件传值
const operTypeID = ref<number | null>(null);
provide("operTypeID", operTypeID);

//显示详情
const onShowDetail = (row) => {
    isShowDetail.value = true;
    operTypeID.value = row?.autoID;
    nextTick(() => {
        OperTypeDetailRef.value.Init();
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
};

/********************************************** 对话框相关 **********************************************/
//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData", "close"]);
defineExpose({ OperTypeDataTableRef });
</script>
